<template>
  <div>
      <el-row class="tac">
        <h2>电动车租赁</h2>
        <el-col :span="6">         
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo" >
            
            <el-menu-item index="1" @click="intoHome">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>
             <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>车辆分类管理</span>
                </template>
                <el-menu-item-group>                  
                  <el-menu-item index="1-1" @click="brand">电动车品牌</el-menu-item>
                  <el-menu-item index="1-2" >价格明细管理</el-menu-item>
                </el-menu-item-group>                
              </el-submenu>                                      
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>用户管理</span>
                </template>
                <el-menu-item-group>                  
                  <el-menu-item index="1-1" @click="businessUser">商家管理</el-menu-item>
                  <el-menu-item index="1-2" @click="customerUser">顾客管理</el-menu-item>
                </el-menu-item-group>                
              </el-submenu>
            
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title" @click="orderGoods">订单管理</span>
            </el-menu-item>
           
          </el-menu>
        </el-col>
  
      </el-row>
  </div>
</template>

<script>
import SidebarItem from './SidebarItem.vue';

  export default {
    name:'sideBar',
    data() {
      return {
        business:"business",
        customer:'customer'
      }
    },
    components:{
      SidebarItem
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      intoHome(){
        this.$router.push('/home')
      },
      businessUser(){
        this.$router.push('/userhome/'+this.business)
      },
      customerUser(){
        this.$router.push('/userhome/'+this.customer)
      },
      brand(){
        this.$router.push('/brand')
      },
      orderGoods(){
        this.$router.push('/orderGoods')
      }
    }
  }
</script>

<style scoped>  
.tac{
  height: 100%;
}
</style>